<template>
  <div class="hello">
  <h2>双括号语法</h2>
    <!-- 4.{{js环境}} 语法 -->
    <p>数值运算：{{ 1 + 2 }}</p>
    <p>字符串：{{ "hello" }}</p>
    <p>数组：{{ [1, 2, 3] }}</p>
    <p>对象：{{ { user: "admin" } }}</p>
    <p>布尔值：{{ true }}</p>
    <!-- <p>if判断：{{ if(2>1){} }}</p> -->
    <!-- <p>函数：{{ function(){} }}</p> -->
    <p>变量：{{ msg }}</p>
    <p>多个变量：{{ user + " hello" }} {{ msg }}</p>
    <p>三目运算：{{ 3 > 2 ? "真" : "假" }}</p>
    <h2>指令</h2>
    <p>我是一个p标签<span>span</span></p>
    <!-- {{变量}} innerText -->
    <p>{{ text }}</p>
    <!-- 类似于：innerHTML -->
    <p v-html="text"></p>
    <p v-html="text + 'xxx'"></p>
    <p v-text="text"></p>
    <h3>v-if/v-else/v-else-if</h3>
    <!-- 显示、隐藏：控制元素是否渲染 DOM元素创建和销毁 -->
    <p v-if="!flag">v-if-看我显示吗</p>
    <p v-else>v-else-取反</p>
    <p v-if="num >= 10">高级</p>
    <p v-else-if="num > 5">中级</p>
    <p v-else>低级</p>
    <h3>v-show</h3>
    <!-- 显示、隐藏：控制元素的样式 dispaly:block|none -->
    <p v-show="flag">v-show-看我显示</p>
    <!-- 在<template>元素上使用v-if 条件渲染分组 -->
    <template v-if='flag'>
      <h3>在template元素上使用v-if</h3>
      <p>条件渲染分组</p>
    </template>
  </div>
</template>

<script>
export default {
  // 5.组件内的变量 data(){return {}} 独立作用域
  data() {
    return {
      msg: "哈哈哈",
      user: "admin",
      text: "我是一个p标签<span>span</span>",
      flag: true,
      num: 1,
    };
  },
}
</script>
